<template>
    <header class="wrap">
        <div class="wrap_left">
            <a class="wrap_a" href="javascript:history.back()">
                <i class="head_icon"></i>
            </a>
        </div>
        <span class="head_span">选择城市</span>
        <div class="wrap_right" >
            <a class="wrap_right_one" href="/">
                <span class="wrap_right_span"> <i class="wrap_right_i">
                    <img class="wrap_right_img" src="../../../assets/img/home.png">
                </i> 首页</span>
            </a>
            <a class="wrap_right_one" href="/">
                <span class="wrap_right_span"> <i class="wrap_right_i">
                    <img class="wrap_right_img wrap_right_two" src="../../../assets/img/search.png">
                </i> 首页</span>
            </a>
        </div>
    </header>
</template>

<script>
    export default {
        name: "CitHead"
    }
</script>

<style scoped>
    .wrap{
        height: 1.01rem;
        color: #fff;
        background: #06c1ae;
        border-bottom: 1px solid #21897d;
        display: -webkit-box;
        display: -ms-flexbox;
        position: relative;
    }
    .wrap_left{
        height: 1.01rem;
        line-height: 1.01rem;
    }
    .wrap_a{
        height: 1rem;
        width: .45rem;
        text-decoration: none;
        outline: 0;
        line-height: 1rem;
        padding: 0 .3rem;
        display: block;
        color: inherit;

        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .head_icon{
        width: .45rem;
        height: .45rem;
        position: relative;
        font-family: base_icon;
        display: inline-block;
        vertical-align: middle;
        font-style: normal
    }
    .head_icon:before{
        content: '';
        display: block;
        position: absolute;
        left: .07rem;
        top: 0;
        width: .4rem;
        height: .4rem;
        border-bottom: .04rem solid #fff;
        border-left: .04rem solid #fff;
        -webkit-transform: scaleY(0.8) rotateZ(45deg);
        -moz-transform: scaleY(0.8) rotateZ(45deg);
        -ms-transform: scaleY(0.8) rotateZ(45deg);
    }
    .head_span{
        display: block;
        font-size: .36rem;
        -webkit-box-flex: 1;
        font-weight: 400;
        text-align: center;
        line-height: 1rem;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .wrap_right_one{
        display: inline-block;
        height: 100%;
        line-height: 1rem;
        text-align: center;
        width: .9rem;
        text-decoration: none;
        outline: 0;
        color: inherit;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wrap_right_span{
        display: inline-block;
        font-size: .2rem;
        line-height: 1;
        vertical-align: middle;
    }
    .wrap_right_span{
        display: block;
        margin: auto;
        margin-bottom:.12rem;
    }
    .wrap_right_i{
        display: block;
        margin: auto;
        font-family: base_icon;
        vertical-align: middle;
        font-style: normal;
        font-size: .4rem;
    }
    .wrap_right_img{
        width: .55rem;
        height: .6rem;
        margin-top: .1rem;
    }
    .wrap_right_two{
        width: .48rem;
        height: .48rem;
        margin-bottom: .04rem;
    }

</style>